import echarts from 'echarts'

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const scale = windowWidth / 1920

/*let titleFontSize = 28;
let labelFontSize = 20;
let nameFontSize = 20;
let legendFontSize = 20;
let gaugeDetailFontSize = 30;
let gaugeTitleFontSize = 20;*/

// 适配不同的分辨率
/*let titleFontSize = windowWidth > 1920 ? 28 : 15;
let labelFontSize = windowWidth > 1920 ? 20 : 12;
let nameFontSize = windowWidth > 1920 ? 20 : 12;
let legendFontSize = windowWidth > 1920 ? 20 : 12;
let gaugeDetailFontSize = windowWidth > 1920 ? 30 : 12;
let gaugeTitleFontSize = windowWidth > 1920 ? 20 : 8;
let chartGridTop = windowWidth > 1920 ? 100 : 50;
let chartGridTop2 = windowWidth > 1920 ? 60 : 30;*/

let titleFontSize = 15 * scale;
let labelFontSize = 12 * scale;
let nameFontSize = 12 * scale;
let legendFontSize = 12 * scale;
let gaugeDetailFontSize = 16 * scale;
let gaugeTitleFontSize = 12 * scale;
let chartGridTop = 70 * scale;
let chartGridTop2 = 40 * scale;
let pointerWidth = 2 * scale;
let legendHeight = 3 * scale;
let namePaddingLeft = 50 * scale;
let legendWidth = 25 * scale;

// 当前温度
export const currentTemperatureOption = {
    grid: {
        top: '0%',
        bottom: '0%',
        left: '0%',
        right: '0%',
        containLabel: true,
    },
    tooltip: {
        formatter: '{b} : {c}°C'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    series: [
        {
            type: 'gauge',
            name: '温度',
            radius: '100%',
            data: [
                {
                    value: 20,
                    name: '温度'
                }
            ],
            min: 15,
            max: 35,
            splitNumber: 5,
            axisLabel: {
                show: false,
                textStyle: {
                    fontSize: '1.67%'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: [[0, '#228b22'], [1, '#B4C0CD']],
                    width: 0
                },
            },
            pointer: {
                width: pointerWidth,
                length: '70%',
            },
            detail: {
                color: '#fff',
                fontSize: gaugeDetailFontSize,
                offsetCenter: [0, '70%'],
                formatter: "{value}°C",
            },
            title: {
                color: '#fff',
                fontSize: gaugeTitleFontSize,
                offsetCenter: [0, '25%'],
            }
        }
    ]
}
// 当前湿度
export const currentHumidityOption = {
    grid: {
        top: '0%',
        bottom: '0%',
        left: '0%',
        right: '0%',
        containLabel: true,
    },
    tooltip: {
        formatter: '{b} : {c}%'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    series: [
        {
            type: 'gauge',
            radius: '100%',
            name: '湿度',
            data: [
                {
                    value: 45,
                    name: '湿度'
                }
            ],
            min: 30,
            max: 80,
            splitNumber: 5,
            axisLabel: {
                show: false,
                textStyle: {
                    fontSize: 30
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: [[0, '#228b22'], [1, '#B4C0CD']],
                    width: 0
                },
            },
            pointer: {
                width: pointerWidth,
                length: '70%',
            },
            detail: {
                color: '#fff',
                fontSize: gaugeDetailFontSize,
                offsetCenter: [0, '70%'],
                formatter: "{value}%",
            },
            title: {
                color: '#fff',
                fontSize: gaugeTitleFontSize,
                offsetCenter: [0, '25%'],
            }
        }
    ]
}
// 当前尘埃
export const currentDustOption = {
    grid: {
        top: '0%',
        bottom: '0%',
        left: '0%',
        right: '0%',
        containLabel: true,
    },
    tooltip: {
        formatter: '{b} : {c}'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    series: [
        {
            type: 'gauge',
            radius: '100%',
            name: '尘埃',
            detail: {
                formatter: '{value}'
            },
            data: [
                {
                    value: 8,
                    name: '尘埃'
                }
            ],
            min: 0,
            max: 100,
            splitNumber: 5,
            axisLabel: {
                show: false,
                textStyle: {
                    fontSize: 24
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: [[0, '#228b22'], [1, '#B4C0CD']],
                    width: 0
                },
            },
            pointer: {
                width: pointerWidth,
                length: '70%',
            },
            detail: {
                color: '#fff',
                fontSize: gaugeDetailFontSize,
                offsetCenter: [0, '70%'],
            },
            title: {
                color: '#fff',
                fontSize: gaugeTitleFontSize,
                offsetCenter: [0, '25%'],
            }
        }
    ]
}
// 温度趋势
export const tempTrendOption = {
    grid: {
        top: chartGridTop,
        bottom: '0%',
        left: '3%',
        right: '3%',
        containLabel: true
    },
    title: {
        text: '温度趋势',
        textStyle: {
            fontSize: titleFontSize,
            color: '#0ff',
        },
        // padding: [0, 0, 0, 10],
    },
    tooltip: {
        trigger: 'axis',
        formatter: (value) => {
            console.log(value)
            let str = `${value[0].axisValue}<br/>`
            str += `${value[0].marker} ${value[0].seriesName} : ${value[0].value}°C`
            return str
        }
    },
    legend: {
        selectedMode: 'multiple',
        x: 'right',
        textStyle: {
            color: '#fff',
            fontSize: legendFontSize,
        },
        data: [
            {name: '温度', icon: 'roundRect'},
        ],
        itemHeight: legendHeight,
        itemWidth: legendWidth,
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: false,
    xAxis: [
        {
            type: 'category',
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            // data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
            data: [],
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                },
                align: 'left',
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '温度(°C)',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            splitNumber: 3,
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            min: 15,
            max: 35,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                }
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: nameFontSize,
            }
        }
    ],
    series: [
        {
            type: 'line',
            name: '温度',
            smooth: true,// 曲线平滑
            // data: [17, 15, 20, 25, 18, 25, 31, 27, 35, 28],
            data: [],
            itemStyle: {
                normal: {
                    color: '#006aff'
                }
            }
        }
    ]
}

// 湿度趋势
export const humiTrendOption = {
    grid: {
        top: chartGridTop,
        bottom: '0%',
        left: '3%',
        right: '3%',
        containLabel: true
    },
    title: {
        text: '湿度趋势',
        textStyle: {
            fontSize: titleFontSize,
            color: '#0ff',
        },
        // padding: [0, 0, 0, 10],
    },
    tooltip: {
        trigger: 'axis',
        formatter: (value) => {
            console.log(value)
            let str = `${value[0].axisValue}<br/>`
            str += `${value[0].marker} ${value[0].seriesName} : ${value[0].value}%`
            return str
        }
    },
    legend: {
        selectedMode: 'multiple',
        x: 'right',
        textStyle: {
            color: '#fff',
            fontSize: legendFontSize,
        },
        data: [
            {name: '湿度', icon: 'roundRect'},
        ],
        itemHeight: legendHeight,
        itemWidth: legendWidth,
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: false,
    xAxis: [
        {
            type: 'category',
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            // data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
            data: [],
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                },
                align: 'left',
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '湿度(%)',
            min: 30,
            max: 80,
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            // splitNumber: 3,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                }
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: nameFontSize
            }
        }
    ],
    series: [
        {
            type: 'line',
            name: '湿度',
            smooth: true,// 曲线平滑
            // data: [45, 60, 49, 55, 53, 50, 47, 57, 54, 58],
            data: [],
            itemStyle: {
                normal: {
                    color: '#00ffff'
                }
            }
        }
    ]
}

// 尘埃趋势
export const dustTrendOption = {
    grid: {
        top: chartGridTop2,
        bottom: '0%',
        left: '3%',
        right: '3%',
        containLabel: true,
    },
    title: {
        text: '尘埃趋势',
        textStyle: {
            color: '#00ffff',
            fontSize: titleFontSize,
        },
    },
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: true
            },
            magicType: {
                show: false,
                type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            // data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
            data: [],
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize,
                },
                align: 'left',
            },
            nameTextStyle: {
                color: '#fff'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            min: 0,
            max: 40,// 尘埃取值范围应该为0-100
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize,
                }
            },
            nameTextStyle: {
                color: '#fff'
            }
        }
    ],
    series: [
        {
            name: '尘埃',
            type: 'line',
            smooth: true,
            itemStyle: {
                normal: {
                    areaStyle: {
                        type: 'default',
                        color: 'red',
                    },
                    color: '#006aff'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#006bff'},
                        {offset: 1, color: '#245fb2', opacity: 0.5}
                    ])
                }
            },
            // data: [17, 15, 20, 25, 18, 25, 31, 27, 35, 28]
        }
    ]
}
// 当前良品率
export const currentYieldOption = {
    grid: {
        top: '0%',
        bottom: '0%',
        left: '0%',
        right: '0%',
        containLabel: true,
    },
    tooltip: {
        formatter: '{b} : {c}%'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    series: [
        {
            type: 'gauge',
            radius: '100%',
            name: '良品率',
            data: [
                {
                    // value: 94,
                    name: '良品率'
                }
            ],
            min: 80,
            max: 100,
            splitNumber: 5,
            axisLabel: {
                show: false,
                textStyle: {
                    fontSize: 24
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: [[0, '#228b22'], [1, '#B4C0CD']],
                    width: 0
                },
            },
            pointer: {
                width: pointerWidth,
                length: '70%',
            },
            detail: {
                color: '#fff',
                fontSize: gaugeDetailFontSize,
                offsetCenter: [0, '70%'],
                formatter: '{value}%',
            },
            title: {
                color: '#fff',
                fontSize: gaugeTitleFontSize,
                offsetCenter: [0, '25%'],
            }
        }
    ]
}
// 当前稼动率
export const currentActivationOption = {
    grid: {
        top: '0%',
        bottom: '0%',
        left: '0%',
        right: '0%',
        containLabel: true,
    },
    tooltip: {
        formatter: '{b} : {c}%'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    series: [
        {
            type: 'gauge',
            name: '稼动率',
            radius: '100%',
            data: [
                {
                    value: 53,
                    name: '稼动率'
                }
            ],
            min: 0,
            max: 100,
            splitNumber: 5,
            axisLabel: {
                show: false,
                textStyle: {
                    fontSize: 24
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: [[0, '#228b22'], [1, '#B4C0CD']],
                    width: 0
                },
            },
            pointer: {
                width: pointerWidth,
                length: '70%',
            },
            detail: {
                color: '#fff',
                fontSize: gaugeDetailFontSize,
                offsetCenter: [0, '70%'],
                formatter: '{value}%',
            },
            title: {
                color: '#fff',
                fontSize: gaugeTitleFontSize,
                offsetCenter: [0, '25%'],
            }
        }
    ]
}
// 当前气压
export const currentPressureOption = {
    grid: {
        top: '0%',
        bottom: '0%',
        left: '0%',
        right: '0%',
        containLabel: true,
    },
    tooltip: {
        formatter: '{b} : {c}kPa'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    series: [
        {
            type: 'gauge',
            radius: '100%',
            name: '气压',
            data: [
                {
                    value: 101,
                    name: '气压'
                }
            ],
            min: 98,
            max: 104,
            splitNumber: 5,
            axisLabel: {
                show: false,
                textStyle: {
                    fontSize: 24
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: [[0, '#228b22'], [1, '#B4C0CD']],
                    width: 0
                },
            },
            pointer: {
                width: pointerWidth,
                length: '60%',
            },
            detail: {
                color: '#fff',
                fontSize: gaugeDetailFontSize,
                offsetCenter: [0, '70%'],
                formatter: '{value}kPa',
            },
            title: {
                color: '#fff',
                fontSize: gaugeTitleFontSize,
                offsetCenter: [0, '25%'],
            }
        }
    ]
}
// 良品率、稼动率趋势
export const yieldActTrendOption = {
    grid: {
        top: chartGridTop,
        bottom: '0%',
        left: '3%',
        right: '3%',
        containLabel: true
    },
    title: {
        text: '良品率、稼动率趋势',
        textStyle: {
            fontSize: titleFontSize,
            color: '#00ffff'
        }
    },
    tooltip: {
        trigger: 'axis',
        formatter: (value) => {
            console.log(value)
            let str = `${value[0].axisValue}<br/>`
            str += `${value[0].marker} ${value[0].seriesName} : ${value[0].value}%<br/>`
            str += `${value[1].marker} ${value[1].seriesName} : ${value[1].value}%`
            return str
        }
    },
    legend: {
        x: 'right',
        textStyle: {
            color: '#fff',
            fontSize: legendFontSize,
        },
        data: [
            {name: '良品率', icon: 'roundRect'},
            {name: '稼动率', icon: 'roundRect'},
        ],
        itemHeight: legendHeight,
        itemWidth: legendWidth,
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            // data: ['12-11', '12-12', '12-13', '12-14', '12-15', '12-16', '12-17', '12-18', '12-19', '12-20', '12-21', '12-22', '12-23', '12-24', '12-25'],
            data: [],
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize,
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '良品率(%)',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                textStyle: {
                    colro: '#fff',
                    fontSize: labelFontSize,
                }
            },
            splitLine: {
                show: false
            },
            min: 80,
            max: 100,
            axisTick: {
                show: false
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: nameFontSize,
                align: 'left'
            },
            splitNumber: 3,
        },
        {
            type: 'value',
            name: '稼动率(%)',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize,
                }
            },
            splitLine: {
                show: false
            },
            min: 0,
            max: 100,
            axisTick: {
                show: false
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: nameFontSize,
            },
            splitNumber: 3,
        }
    ],
    series: [
        {
            type: 'line',
            name: '良品率',
            smooth: true,// 曲线平滑
            data: [94, 90, 95, 91, 94, 96, 93, 90, 95, 93, 97, 90, 89, 97, 94],
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#006aff'
                    },
                    color: '#006aff'
                }
            }
        },
        {
            type: 'line',
            name: '稼动率',
            smooth: true,// 曲线平滑
            data: [50, 55, 60, 45, 53, 56, 42, 47, 49, 41, 50, 59, 55, 52, 50],
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#00ffff'
                    },
                    color: '#00ffff'
                }
            },
            yAxisIndex: 1
        }
    ]
}
// 产量趋势
export const outputTrendOption = {
    grid: {
        top: chartGridTop2,
        bottom: '0%',
        left: '3%',
        right: '3%',
        containLabel: true
    },
    title: {
        text: '产量趋势',
        textStyle: {
            fontSize: titleFontSize,
            color: '#0ff'
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: true
            },
            magicType: {
                show: false,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            // data: ['12-11', '12-12', '12-13', '12-14', '12-15', '12-16', '12-17', '12-18', '12-19', '12-20', '12-21', '12-22', '12-23', '12-24', '12-25'],
            data: [],
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                },
                show: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize,
                }
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: 0,
            // max: 300,
            max: 200,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize,
                }
            },
            splitNumber: 4,
        }
    ],
    series: [
        {
            name: '产量',
            type: 'bar',
            data: [110, 210, 89, 249, 278, 305, 220, 274, 219, 184, 103, 99, 189, 111, 222],
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#188df0'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            barWidth: '50%'
        }
    ]
}
// 预测结果呈现
var upColor = '#5388ca'
var upBorderColor = '#5388ca'
var downColor = '#5388ca'
var downBorderColor = '#5388ca'// #4C5E77

// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
var data0 = splitData([
    [
        "6",
        0.666666666666667,
        0.666666666666667,
        0.666666666666667,
        0.666666666666667
    ],
    [
        "7",
        1,
        0.849836585598797,
        1,
        0.849836585598797
    ],
    [
        "8",
        0.666666666666667,
        0.793492047615872,
        0.666666666666667,
        0.793492047615872
    ],
    [
        "9",
        1,
        0.849836585598797,
        1,
        0.849836585598797
    ],
    [
        "10",
        1,
        0.881917103688197,
        1,
        0.881917103688197
    ],
    [
        "11",
        1,
        0.90267093384844,
        1,
        0.90267093384844
    ],
    [
        "12",
        1,
        0.917207632583725,
        1,
        0.917207632583725
    ],
    [
        "13",
        0.666666666666667,
        0.889756521002609,
        0.666666666666667,
        0.889756521002609
    ],
    [
        "14",
        1,
        0.90267093384844,
        1,
        0.90267093384844
    ],
    [
        "15",
        0.666666666666667,
        0.881917103688197,
        0.666666666666667,
        0.881917103688197
    ],
    [
        "16",
        1,
        0.893297149877799,
        1,
        0.893297149877799
    ],
    [
        "17",
        1,
        0.90267093384844,
        1,
        0.90267093384844
    ],
    [
        "18",
        1,
        0.910527225875113,
        1,
        0.910527225875113
    ]
])

const rectData = [
    [0.666666666666667, 1.333333333333334, 0.666666666666667, 1.333333333333334],
    [1, 1.849836585598797, 1, 1.849836585598797],
    [0.666666666666667, 1.460158714282539, 0.666666666666667, 1.460158714282539],
    [1, 1.849836585598797, 1, 1.849836585598797],
    [1, 1.881917103688197, 1, 1.881917103688197],
    [1, 1.90267093384844, 1, 1.90267093384844],
    [1, 1.9172076325837248, 1, 1.9172076325837248],
    [0.666666666666667, 1.556423187669276, 0.666666666666667, 1.556423187669276],
    [1, 1.90267093384844, 1, 1.90267093384844],
    [0.666666666666667, 1.548583770354864, 0.666666666666667, 1.548583770354864],
    [1, 1.893297149877799, 1, 1.893297149877799],
    [1, 1.90267093384844, 1, 1.90267093384844],
    [1, 1.910527225875113, 1, 1.910527225875113],
];

function splitData (rawData) {
    let categoryData = [];
    let values = [];
    let newValues = [];
    for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0])
        values.push(rawData[i])
    }
    console.log(`values:${values}`)
    for (let item of values) {
        let a = item[0] + item[1];
        let b = [item[0], a, item[0], a];
        newValues.push(b);
        console.log(b)
    }
    console.log(`newValues:${newValues}`)
    return {
        categoryData: categoryData,
        values: newValues
    }
}

const forecast = [2, 1, 1, 2, 2, 2, 2, 2, 1, 1, 2, 2, 2]
const actual = [1, 1, 2, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2]

export const forecastOption = {

    title: {
        text: '预测结果',
        left: 0,
        textStyle: {
            fontSize: titleFontSize,
            color: '#00ffff'
        },
        // padding: [5, 5, 5, 15],
    },
    tooltip: {
        show: false,
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        show: true,
        x: 'right',
        textStyle: {
            color: '#fff',
            fontSize: legendFontSize,
        },
        data: [
            {name: '亲和度', icon: 'roundRect'},
            {name: '实际值', icon: 'roundRect'},
            {name: '预测值', icon: 'roundRect'},
        ],
        itemHeight: legendHeight,
        itemWidth: legendWidth,
        // padding: [10, 40, 5, 5],
    },
    grid: {
        top: chartGridTop,
        left: '5%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        data: data0.categoryData,
        scale: true,
        boundaryGap: true,// X轴不从零开始
        axisLine: {
            onZero: false,
            lineStyle: {
                color: '#fff'
            }
        },
        splitLine: {show: false},
        // splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax',
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: labelFontSize,
            },
            align: 'left',
            // rotate: 345,
            // showMaxLabel: false,// 不显示最大 tick 的 label
        }
    },
    yAxis: [{
        type: 'value',
        name: '实际值/预测值',
        scale: true,
        min: 0,
        max: 7,
        // splitNumber: 7,
        splitArea: {
            show: false
        },
        axisLine: {
            onZero: false,
            lineStyle: {
                color: '#fff'
            }
        },
        splitLine: {show: false},
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: labelFontSize,
            }
        },
        nameTextStyle: {
            align: 'left',
            padding: [0, 0, 0, namePaddingLeft],
            fontSize: nameFontSize,
        }
    }, {
        type: 'value',
        name: '亲和度(%)',
        scale: true,
        min: 0,
        max: 3,
        splitNumber: 15,
        splitArea: {
            show: false
        },
        axisLine: {
            onZero: false,
            lineStyle: {
                color: '#fff'
            }
        },
        splitLine: {show: false},
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: labelFontSize,
            }
        },
        nameTextStyle: {
            fontSize: nameFontSize,
        }
    }],
    series: [
        {
            name: '亲和度',
            type: 'candlestick',
            dimensions: ['date', '契合度', '亲密度'],
            data: data0.values,
            itemStyle: {
                normal: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                }
            },
            barWidth: '30%',
            yAxisIndex: 1
        },
        {
            name: '实际值',
            type: 'line',
            data: actual,
            smooth: true,// 曲线平滑
            lineStyle: {
                normal: {
                    lineStyle: {
                        color: '#006aff'
                    },
                    color: '#006aff'
                },
            },
            itemStyle: {
                normal: {
                    color: '#006aff'
                }
            },
            yAxisIndex: 0
        },
        {
            name: '预测值',
            type: 'line',
            data: forecast,
            smooth: true,// 曲线平滑
            lineStyle: {
                normal: {
                    lineStyle: {
                        color: '#00ffff'
                    },
                    color: '#00ffff'
                },
            },
            itemStyle: {
                normal: {
                    color: '#00ffff'
                }
            },
            yAxisIndex: 0
        },

    ]

}

// 电机参数状态
export const machineParameterOption = {
    grid: {
        top: chartGridTop,
        left: '8%',
        right: '8%',
        bottom: '15%',
    },
    title: {
        text: '电机参数状态',
        textStyle: {
            fontSize: titleFontSize,
            color: '#00ffff',
        },
        // padding: [5, 5, 5, 40],
    },
    tooltip: {
        trigger: 'axis',
        formatter: (value) => {
            console.log(value)
            let str = `${value[0].axisValue}<br/>`
            str += `${value[0].marker} ${value[0].seriesName} : ${value[0].value}V<br/>`
            str += `${value[1].marker} ${value[1].seriesName} : ${value[1].value}A<br/>`
            str += `${value[2].marker} ${value[2].seriesName} : ${value[2].value}°C<br/>`
            str += `${value[3].marker} ${value[3].seriesName} : ${value[3].value}%<br/>`
            return str
        }
    },
    legend: {
        selectedMode: 'multiple',
        x: 'right',
        textStyle: {
            color: '#fff',
            fontSize: legendFontSize,
        },
        data: [
            {name: '电压', icon: 'roundRect'},
            {name: '电流', icon: 'roundRect'},
            {name: '温度', icon: 'roundRect'},
            {name: '负载', icon: 'roundRect'},
        ],
        itemHeight: legendHeight,
        itemWidth: legendWidth,
        // padding: [15, 25, 5, 5],
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: false,
    xAxis: [
        {
            type: 'category',
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                },
                inside: false,
                align: 'left',
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '电流(A)',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            min: 0,
            max: 10,
            splitNumber: 6,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                }
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: nameFontSize,
                align: 'left',
                baseline: 'bottom',
            }
        },
        {
            type: 'value',
            name: '电压(V)/温度(°C)/负载(%)',
            min: 0,
            max: 420,
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitNumber: 6,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                }
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: nameFontSize,
                align: 'right',
                padding: [0, 120 * scale, 0, 0],
            }
        }
    ],
    series: [
        {
            type: 'line',
            name: '电压',
            smooth: true,// 曲线平滑
            data: [380, 390, 385, 380, 395, 375, 370, 365, 380, 385],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#4dd77a'
                }
            },
            yAxisIndex: 1,
        },
        {
            type: 'line',
            name: '电流',
            smooth: true,// 曲线平滑
            data: [4, 4.5, 5, 4.8, 4, 4.7, 5.3, 6, 5.7, 5.5],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#006aff'
                }
            }
        },
        {
            type: 'line',
            name: '温度',
            smooth: true,// 曲线平滑
            data: [90, 95, 97, 100, 95, 93, 95, 90, 87, 98],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#00ffff'
                }
            },
            yAxisIndex: 1
        },
        {
            type: 'line',
            name: '负载',
            smooth: true,// 曲线平滑
            data: [55, 60, 69, 36, 48, 50, 66, 47, 50, 70],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#c6cc7a'
                }
            },
            yAxisIndex: 1
        }
    ]
}

// 关键状态参数
export const primaryStatusChartOption = {
    grid: {
        top: chartGridTop,
        bottom: 0,
        left: 0,
        right: '7%',
        containLabel: true
    },
    title: {
        text: '关键状态参数',
        show: false,
        textStyle: {
            fontSize: titleFontSize,
            color: '#0ff',
        },
        // padding: [0, 0, 0, 10],
    },
    tooltip: {
        trigger: 'axis',
        formatter: (value) => {
            console.log(value)
            let str = `${value[0].axisValue}<br/>`
            str += `${value[0].marker} ${value[0].seriesName} : ${value[0].value}°C<br/>`
            str += `${value[1].marker} ${value[1].seriesName} : ${value[1].value}H<br/>`
            str += `${value[2].marker} ${value[2].seriesName} : ${value[2].value}H<br/>`
            str += `${value[3].marker} ${value[3].seriesName} : ${value[3].value}N<br/>`
            str += `${value[4].marker} ${value[4].seriesName} : ${value[4].value}H<br/>`
            return str
        }
    },
    legend: {
        show: true,
        selectedMode: 'multiple',
        x: 'right',
        textStyle: {
            color: '#fff',
            fontSize: legendFontSize,
        },
        data: [
            {name: '温度', icon: 'roundRect'},
            {name: '锡膏开封时间', icon: 'roundRect'},
            {name: '湿敏元器件烘烤时间', icon: 'roundRect'},
            {name: '钢网张力', icon: 'roundRect'},
            {name: '锡膏加热时间', icon: 'roundRect'},
        ],
        itemHeight: legendHeight,
        itemWidth: legendWidth,
        padding: [50,0,0,0],
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: false,
    xAxis: [
        {
            type: 'category',
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            data: ['8:00', '8:15', '8:30', '8:45', '9:00', '9:15', '9:30', '9:45', '10:00',
                '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00',
                '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00',
                '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00'],
            // data: [],
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                },
                align: 'left',
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '关键状态参数',
            /*min: 15,
            max: 35,*/
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            // splitNumber: 3,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                }
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: nameFontSize,
                align: 'left',
                padding: [0,0,10,90],
            },
        }
    ],
    series: [
        {
            type: 'line',
            name: '温度',
            smooth: true,// 曲线平滑
            data: [24, 21, 22, 25, 27, 29, 25, 23, 24, 26, 29,
                27, 26, 27, 29, 27, 25, 23, 24, 25, 27, 26,
                24, 26, 25, 23, 25, 28, 27, 26, 28, 31, 27],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#0ff'
                }
            },
        }, {
            type: 'line',
            name: '锡膏开封时间',
            smooth: true,// 曲线平滑
            data: [34, 31, 35, 36, 33, 30, 31, 32, 34, 31, 35,
                34, 36, 37, 35, 34, 32, 33, 31, 34, 35, 37,
                36, 38, 35, 38, 35, 33, 31, 34, 37, 41, 38],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#4292f3'
                }
            },
        },{
            type: 'line',
            name: '湿敏元器件烘烤时间',
            smooth: true,// 曲线平滑
            data: [55, 54, 55, 53, 52, 51, 53, 54, 53, 52, 50,
                48, 46, 47, 45, 44, 46, 48, 46, 45, 47, 50,
                52, 54, 53, 52, 54, 55, 53, 52, 51, 53, 51],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#d48265'
                }
            },
        },{
            type: 'line',
            name: '钢网张力',
            smooth: true,// 曲线平滑
            data: [18, 17, 16, 17, 20, 19, 21, 18, 17, 15, 16,
                17, 18, 16, 19, 20, 23, 22, 21, 19, 22, 21,
                18, 17, 19, 21, 23, 22, 19, 18, 15, 17, 18],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#3ed28f'
                }
            },
        },{
            type: 'line',
            name: '锡膏加热时间',
            smooth: true,// 曲线平滑
            data: [15, 11, 10, 12, 13, 14, 11, 9, 8, 10, 11,
                12, 10, 9, 11, 13, 12, 14, 15, 12, 13, 11,
                9, 7, 10, 11, 14, 15, 13, 11, 12, 10, 9],
            // data: [],
            itemStyle: {
                normal: {
                    color: '#c4cb7a'
                }
            },
        },
    ]
}

// 设备自愈
export const selfHealingChartOption = {
    grid: {
        top: chartGridTop,
        bottom: 0,
        left: 0,
        right: '7%',
        containLabel: true
    },
    title: {
        text: '∑(UP/RUN/UPH/OEE...)',
        show: false,
        textStyle: {
            fontSize: titleFontSize,
            color: '#0ff',
        },
        // padding: [0, 0, 0, 10],
    },
    tooltip: {
        show: false,
        trigger: 'axis',
        formatter: (value) => {
            console.log(value)
            let str = `${value[0].axisValue}<br/>`
            str += `${value[0].marker} ${value[0].seriesName} : ${value[0].value}<br/>`
            str += `${value[1].marker} ${value[1].seriesName} : ${value[1].value}<br/>`
            str += `${value[2].marker} ${value[2].seriesName} : ${value[2].value}<br/>`
            return str
        }
    },
    legend: {
        show: true,
        selectedMode: 'multiple',
        x: 'right',
        textStyle: {
            color: '#fff',
            fontSize: legendFontSize,
        },
        data: [
            {name: '正常运行', icon: 'roundRect'},
            {name: '故障', icon: 'roundRect'},
            {name: '自愈', icon: 'roundRect'},
        ],
        itemHeight: legendHeight,
        itemWidth: legendWidth,
        padding: [50,0,0,0],
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: false,
    xAxis: [
        {
            type: 'category',
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            // data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
            // data: [],
            data: ['8:00', '8:15', '8:30', '8:45', '9:00', '9:15', '9:30', '9:45', '10:00',
                '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00',
                '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00',
                '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00'],
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                },
                align: 'left',
            },
            /*axisPointer: {
                value: '10:00',
                snap: true,
                lineStyle: {
                    color: '#4292f3',
                },
                label: {
                    show: false,
                    formatter: function (params) {
                        return echarts.format.formatTime('yyyy-MM-dd', params.value);
                    },
                    backgroundColor: '#004E52'
                },
                handle: {
                    show: true,
                    color: '#004E52'
                }
            },*/
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '∑(UP/RUN/UPH/OEE...)',
            min: 35,
            max: 60,
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            // splitNumber: 3,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: labelFontSize
                }
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: nameFontSize,
                align: 'left',
                padding: [0,0,10,200],
            },
        }
    ],
    series: [
        {
            type: 'line',
            name: '正常运行',
            smooth: true,// 曲线平滑
            data: [55, 54, 55, 53, 52, 51, 53, 54, 53, 52, 50,
                '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-',
                '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'],
            // data: [40, 37, 42, '-', '-', '-', '-', '-', '-', '-'],
            /*markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            },*/
            // data: [],
            itemStyle: {
                normal: {
                    color: '#0ff'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#1ea5a9'},
                        {offset: 1, color: '#14405f', opacity: 0.5}
                    ])
                }
            },
        }, {
            type: 'line',
            name: '故障',
            smooth: true,// 曲线平滑
            // data: ['-', '-', 42, 21, 23, 22, '-', '-', '-', '-'],
            data: ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', 50,
                48, 46, 47, 45, 44, 46, 48, 46, 45, 47, 50,
                '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'],
            /*markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },*/
            markLine: {
                symbol: 'none',
                lineStyle: {
                    normal: {
                        color: '#ff4d78',
                    },
                },
                data: [
                    // {yAxis: 30, name: '阈值', label: {normal: {formatter: ''}}},
                    {yAxis: 50, name: '阈值'},
                ]
            },
            // data: [],
            itemStyle: {
                normal: {
                    color: '#d48265'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#8f5240'},
                        {offset: 1, color: '#39323f', opacity: 0.5}
                    ])
                }
            },
        },{
            type: 'line',
            name: '自愈',
            smooth: true,// 曲线平滑
            // data: ['-', '-', '-', '-', '-', 22, 47, 50, 49, 52],
            // data: [],
            data: ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-',
                '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', 50,
                52, 54, 53, 52, 54, 55, 53, 52, 51, 53, 51],
            itemStyle: {
                normal: {
                    color: '#3ed28f'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#32af76'},
                        {offset: 1, color: '#173942', opacity: 0.5}
                    ])
                }
            },
        },
    ]
}